<template>
  <baidu-map
    class="map"
    :center="{lng: 116.404, lat: 39.915}"
    :zoom="15"
    style="height: 100vh"
    @click="addPolygonPoint"
  >
    <bm-polygon
      :edit="false"
      :path="polygonPath"
      :stroke-opacity="0.5"
      :stroke-weight="2"
      :editing="true"
      stroke-color="#e85552"
      fill-color="rgba(232,85,82,0.30)"
      @lineupdate="updatePolygonPath"
    />
  </baidu-map>
</template>

<script>
export default {
  data() {
    return {
      // 多边形路径
      polygonPath: [
        { lng: 116.412732, lat: 39.911707 },
        { lng: 116.39455, lat: 39.910932 },
        { lng: 116.403461, lat: 39.921336 }
      ]
    }
  },
  methods: {
    // 更新多边形路径
    updatePolygonPath(e) {
      this.polygonPath = e.target.getPath()
      console.log(this.polygonPath)
    },
    // 添加多边形路径点
    addPolygonPoint(e) {
      this.polygonPath.push(e.point)
    }
  }
}
</script>
